<template>
  <div>
    <div class="rankTitle">排行</div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="rankContent">
        <router-link :to="{name:'rankContent',query:{type:list.type,name:list.name}}" class="rankList"
                     v-for="(list,index) in lists" :key="index">
          <div class="rankListLeft">
            <p class="leftTitle">{{list.name}}</p>
            <p class="leftList" v-for="(content,id) in list.content" :key="id">{{id+1}} -
              {{content.title.length>8?content.title.substring(0,8)+'...':content.title}} - {{content.author}}</p>
          </div>
          <div class="rankListRight">
            <div class="img"></div>
          </div>
        </router-link>
      </div>
    </van-pull-refresh>

  </div>
</template>

<script>

  export default {
    data () {
      return {
        lists: '',
        isLoading: false
      }
    },
    created () {
      this.$axios.get('https://api.apiopen.top/musicRankings')
        .then(res => {
          this.lists = res.data.result
        })
    },
    methods: {
      onRefresh () {
        setTimeout(() => {
          this.$toast('刷新成功')
          this.isLoading = false
        }, 500)
      }
    }

  }
</script>

<style lang="less">
  .rankTitle {
    width: 100%;
    height: 6rem;
    z-index: 1000;
    background-color: #f4f4f4;
    color: #000;
    line-height: 6rem;
    text-align: center;
    font-size: 2.5rem;
    box-shadow: 0rem 0.5rem 0.5rem #bbb;
  }

  .rankContent {
    width: 100%;
    padding: 1rem 2rem 1rem;
    background-color: #f9f9f9;

    .rankList {
      width: 100%;
      margin-top: 2rem;
      border: 0.1rem solid #ccc;
      background-color: #fff;
      border-radius: 1rem;
      padding-left: 2rem;
      display: block;

      .rankListLeft {
        width: 60%;
        height: 13.5rem;
        display: inline-block;
        color: #000;

        .leftTitle {
          padding-top: 1rem;
          font-size: 2rem;
        }

        .leftList {
          font-size: 1rem;
        }
      }

      .rankListRight {
        float: right;
        width: 39%;
        height: 13.5rem;
        background-image: url(http://img3.imgtn.bdimg.com/it/u=2092629866,904635697&fm=26&gp=0.jpg);

        .img {
          width: 100%;
          height: 100%;
          background-color: #000;
          border-radius: 0 1rem 1rem 0;
          opacity: 0.7;
        }
      }

      &:last-child {
        margin-bottom: 6.8rem;
      }
    }
  }
</style>
